<template>
  <div class="commoList">
    <div class="dateselect">
      <dateselect @listenEvent="dtfn" :querydate="querydate"/>
    </div>
    <div class="table">
      <!-- <div class="flex">
        <el-button size="mini" type="primary" @click="handleAdd(scope.$index, scope.row)">添加</el-button>
      </div> -->
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="产品名称" prop="productName"></el-table-column>
        <el-table-column label="价格" prop="costPrice">
          <template slot-scope="scope">
            <div
              slot="reference"
              class="name-wrapper"
            >{{( scope.row.costPrice/100).toFixed(2)}}&nbsp;元</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">
              <span style="color:#3dc2c2;font-size:14px">编辑</span>
            </el-button>
          </template>
        </el-table-column> -->
        <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>

      <el-pagination
        align="right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="date.page"
        :page-sizes="pageSizes"
        :page-size="date.perPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
      <div class="flex">
        <el-button size="mini" type="primary" @click="Export()">导出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import dateselect from "./dateselect";
export default {
  name: "commodiSettle",
  components: {
    dateselect
  },
  data() {
    return {
      form: {},
      value: "",
      tableData: [],
      pageSizes: [1, 5, 10, 20],
      totalCount: 1, //个数选择器
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      date: {},
      querydate: [],
      loading:true
    };
  },
  created() { 
    this.querydate[0]= this.$route.query.id.startTime;
    this.querydate[1]= this.$route.query.id.endTime;
    },
  mounted() {
    // console.log(this.$route.query.id)
    this.date.startTime = this.$route.query.id.startTime;
    this.date.endTime = this.$route.query.id.endTime;
    this.date.perPage = this.$route.query.id.perPage;
    this.date.page = this.$route.query.id.page;
    this.date.businessId = this.$route.query.id.businessId;
    // console.log(this.date);
    this.getcommolist();
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.loading=false
      this.date.perPage = val;
      this.date.page = 1;
      this.getcommolist();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.loading=false
      this.date.page = val;
      this.getcommolist();
    },
    getcommolist() {
      this.$store
        .dispatch("commodiSettle/getcommolist", this.date)
        .then(data => {
          if (data) {
            // console.log(data);
            this.loading=false;
            this.tableData = data.items;
            this.totalCount = data.total;
          } else {
            // console.log("无数据");
          }
        })
        .catch(err => {
          // console.log(err);
        });
        this.loading=true
    },
    dtfn(param) {
      // console.log(param);
      this.date.startTime = param.startTime;
      this.date.endTime = param.endTime;
      // console.log(this.date);
      this.getcommolist();
    },
    Export() {
      this.$store
        .dispatch("Export/getcommoexport", this.date)
        .then(data => {
          if (data) {
            // console.log(data.url);
            window.location.href = data.url;
          } else {
            // console.log("无数据");
          }
        })
        .catch(err => {
          // console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
}

.dateselect {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.table {
  background: #fff;
  padding: 5px;
  padding-left: 15px;
  margin-bottom: 20px;
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>